<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        margin: 0 auto;
        width: 100px;
        height: 50px;
        text-align: center;
    }
    .linear-gradient{
        background:linear-gradient(to top,white,black);
    }
    .linear-gradient-2{
        background:radial-gradient(circle closest-corner at 20% 30%,white,black);
    }
    p{
        background-image: linear-gradient(30deg, #50baff, #ff4bcc, #50baff);
        -webkit-background-clip:text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 1px 1px #cecece;
    }

</style>
<body>
<div class="linear-gradient">fdasdfasdfa</div>
<br>
<hr>

<div class="linear-gradient-2">fdasdfasdfa</div>

<br>
<hr>
<p>sfadsfahsdhfjakldhsfhaklsdjfhajls;</p>

<!--
CSS3 渐变：
    1）线性渐变
        background:linear-gradient(方向或角度，颜色1 百分比，颜色2 百分比，...)
            方向:
                to left:从右向左渐变
                to right:从左向右渐变
                to top:从下向上渐变
                to bottom: 从上到下渐变
                to top left: 从右下到左上渐变
                to top right: 从坐上到右下渐变
                to bottom left: 从右上到左下
                to bottom right:从左下到右上
            角度：
                例如30度，写法为30deg
     2）径向渐变（沿半径方向渐变）
        background:radial-gradient(形状 渐变大小 at 位置，颜色1 百分比 ，...)
            形状：
                ellipse:椭圆径向渐变（默认）
                circle：园径向渐变
            渐变大小:
                farthest-corner:渐变的半径长度为从圆心到离圆心最远的角(默认)
                closest-side:渐变的半径长度为从圆心到离圆心最近的边
                closest-corner:渐变的半径长度为从圆心到离圆心最近的角
                farthest-side:渐变的半径长度为从圆心到离圆心最远的边
            位置:
                center:设置圆心在中心位置
                top:设置圆心在顶部位置
                bottom:设置圆心在底部位置
      3）文字渐变：通过线性渐变，修改背景为透明
        background-image: linear-gradient(30deg, #50baff, #ff4bcc, #50baff);
        -webkit-background-clip:text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 1px 1px #cecece;
-->


</body>
</html>